<template>
  <div class="tab-bar" v-bind:id="'tab_bar_' + tabGroupId" data-droppable="TABBAR">
    <ul class="tab-labels">
      <template v-if="tabIds && tabIds.length">
        <TabBarLabel v-for="tabId in tabIds" v-bind:tab-id="tabId" v-bind:key="tabId" tab-group-id="tabGroupId" />
      </template>
    </ul>
    <div v-if="isDraggedOver" class="tab-label-insert-pos"></div>
    <div class="tab-add-btn" @click="handleAddTabClick">
      <svg viewBox="0 0 12 16" version="1.1" aria-hidden="true">
        <path fillRule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"></path>
      </svg>
    </div>
    <div class="tab-show-list" style="position:relative" @click.stop="handleShowTabList">
      <i class="fa fa-sort-desc" />
      <MyMenu v-if="showDropdownMenu && dropdownMenuItems.length" class="top-down to-left" v-bind:items="dropdownMenuItems" style="right:2px" @mydeactivate="handHiddenDropMenu" />
    </div>
    <ContextMenu v-if="contextMenu.isActive&&contextMenu.tabGroupId===tabGroupId" v-bind:items="menuItems" :pos="contextMenu.pos" :context="contextMenu.contextNode" @myclosemenu="closeContextMenu"
    />
  </div>
</template>

<script>
  import _ from 'lodash'
  import * as MenuItemConfig from './menu-config'
  import TabBarLabel from './tab-bar-label.vue'
  import ContextMenu from '../content-menu'
  import MyMenu from '../menu'
  import { mapMutations } from 'vuex'

  export default {
    name: 'App',
    components: {
      TabBarLabel,
      ContextMenu,
      MyMenu
    },
    props: ['tabIds', 'tabGroupId', 'defaultContentType', 'containingPaneId', 'isRootPane', 'isDraggedOver'],
    data: function () {
      return {
        showDropdownMenu: false
      }
    },
    computed: {
      tabs: function () {
        let tabArray = this.tabIds.map(tabId => this.$store.state.tab.tabs[tabId])
        return tabArray
      },
      dropdownMenuItems: function () {
        // let baseItems = this.isRootPane ? [] : [{ name: 'Close Pane', command: 'tab:close_all' }]
        let baseItems =  []
        const tabLabelItems = this.tabs && this.tabs.map(tab => ({
          name: tab.title || 'untitled',
          command: e => this.activateTab(tab.id)
        }))

        if (tabLabelItems.length) {
          return baseItems.length ? baseItems.concat({ name: '-' }, tabLabelItems) : tabLabelItems
        } else {
          return baseItems
        }
      },
      menuItems: function () {
        let items
        if (this.defaultContentType === 'terminal') {
          items = MenuItemConfig.items
        } else {
          items = MenuItemConfig.items.concat(MenuItemConfig.itemsSplit)
        }
        return items
      },
      contextMenu: function () {
        return this.$store.state.tab.contextMenu
      }
    },
    methods: {
      ...mapMutations('tab', {
        tabCreateInGroup: 'tabCreateInGroup',
        closeContextMenu: 'contextMenuClose',
        activateTab: 'tabActivate'
      }),
      handleAddTabClick: function () {
        this.tabCreateInGroup([this.tabGroupId])
      },
      handHiddenDropMenu: function () {
        this.showDropdownMenu = false
      },
      handleShowTabList: function () {
        this.showDropdownMenu = true
      }
    }
  }

</script>
